import React from 'react';
import moment from 'moment';
import { Modal, Form, Input, Select, Radio, Switch, DatePicker } from 'antd';

const FormItem = Form.Item;
const TextArea = Input.TextArea;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const formItemLayout = {
labelCol: {
  span: 5,
},
wrapperCol: {
  span: 18,
},
};
@Form.create()
export default class Manageplanmodal extends React.Component {
  handleOk = () => { // 点击OK时，执行修改or新增
    const { dispatch, currentUser, form: { validateFields, getFieldsValue } } = this.props;
    validateFields((errors) => {
      if (errors) {
        return;
      }
      const data = {
        ...currentUser,
        ...getFieldsValue(),
      };
      data.startDate = data.startDate.format('YYYY-MM-DD HH:mm:ss');
      data.endDate = data.endDate.format('YYYY-MM-DD HH:mm:ss');
      const queryData = {
        fixversion_id: data.fixversion_id,
        project_name: data.project_name,
        page: 1,
        pageSize: 10,
      };
      const type = `analysis/${data.id ? 'updatePlan' : 'addPlan'}`;// 根据是否有id
      dispatch({
        type,
        payload: {
          versionparam: data,
          params: queryData,
          cb: this.handleCancel,
        },
      });
    });
  };
  handleCancel = () => {
    const { form: { resetFields }, onCancel } = this.props;
    onCancel();
    resetFields();
  };
  render() {
    const { loading, visible, currentUser, form: { getFieldDecorator } } = this.props;
    const modalProps = {
      title: currentUser.id ? '修改计划' : '新增计划', // 根据主键判断是否存在数据来决定走修改还是编辑，新增情况下，不会存在id，因为currentUser为空
      visible,
      // width: 780, //默认520
      onOk: this.handleOk,
      onCancel: this.handleCancel,
      wrapClassName: 'vertical-center-modal',
      confirmLoading: loading,
      maskClosable: false,
    };
    return (
      <Modal {...modalProps}>
        <Form>
          <FormItem
            label="版本ID"
            {...formItemLayout}
          >
            {getFieldDecorator('fixversion_id', { // 此处写的参数需与接口参数key对应
              initialValue: currentUser.fixversion_id || null,
              rules: [
                {
                  required: true,
                  message: '请输入versionid',
                },
              ],
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            label="项目名称"
            {...formItemLayout}
          >
            {getFieldDecorator('project_name', {
              initialValue: currentUser.project_name || null,
              rules: [
                {
                  required: true,
                  message: '项目名称',
                },
              ],
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            label="开始时间"
            {...formItemLayout}
          >
            {getFieldDecorator('startDate', {
              initialValue: currentUser.startDate ? moment(currentUser.startDate) : null,
              rules: [
                {
                  required: true,
                  message: '开始时间',
                },
              ],
            })(
              <DatePicker style={{ width: '100%' }} showTime format="YYYY-MM-DD HH:mm:ss" />
            )}
          </FormItem>
          <FormItem
            label="结束时间"
            {...formItemLayout}
          >
            {getFieldDecorator('endDate', {
              initialValue: currentUser.endDate ? moment(currentUser.endDate) : null,
              rules: [
                {
                  required: true,
                  message: '结束时间',
                },
              ],
            })(
              <DatePicker style={{ width: '100%' }} showTime format="YYYY-MM-DD HH:mm:ss" />
            )}
          </FormItem>
        </Form>
      </Modal>
    );
  }
}
